<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VhkT6V7yA3ieLfrjtN57hroWRgqIx9vO"></script>
    <script src="../lib/jquery-3.3.1.min.js"></script>
    <script src="../lib/thingjs.min-v1.2.2.4.js"></script>
    <script src="../lib/jquery.min.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../layer/layer.js"></script>

    <style>
        .badge{
            color: #28a4c9;
        }
    </style>
</head>
<body style="background-color: #8D8D8D">

<!--导航栏-->
<nav class="navbar navbar-default" style="margin-bottom: 0">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
        <div class="col-xs-12 col-md-8">
            <a href="/index"><img width="200px" height="50px" src="../imgs/logo2x.png"></a>
        </div>
        <div class="col-xs-6 col-md-4" style="line-height: 50px">
            <div class="row">
                <div class="col-md-2">
                    <a href="/preManage" >基站模板</a>
                </div>
                <div class="col-md-2">
                    <a href="/baseScene" >基站场景</a>
                </div>
                <div class="col-md-2" >
                    <a href="#" >进入3d</a>
                </div>
                <div class="col-md-2">
                </div>
                <div class="col-md-2">
                </div>
                <div class="col-md-2">
                </div>
            </div>
        </div>
    </div>
</nav>

<div>
    <div class="page-header">
        <div class="container-fluid">
            <h1>用户基站<small>用户自定义场景展示</small></h1>
        </div>
    </div>

    <!--&lt;!&ndash;隐藏搜索的基站名&ndash;&gt;待完善------------------------------------------------------------------------------------------------------------------------------>

                <div style="width: 30%;margin-left: 35%;margin-bottom: 2%">
                    <div class="input-group">
                         <input type="text" class="form-control" id="selectName"/>
                         <a onclick="select()" class="input-group-addon"><i class="glyphicon glyphicon-search"></i></a>
                    </div>
                </div>


    <div>
        <div class="container-fluid">  <!--style="padding-top: 1%"-->
            <div  th:each="scene,sceneStat : ${baseScene}">
                <!--<div th:if="${sceneStat.index %6 == 0}">-->
                <!--<div class="row">-->
                <!--</div>-->
                <div class="col-sm-6 col-md-2">
                    <div class="thumbnail">
                        <img  th:if="${scene.sType % 2 ==1}" src="../imgs/scene_01.jpg" alt="" class="img-thumbnail">
                        <img  th:if="${scene.sType % 2 ==0}" src="../imgs/scene_02.jpg" alt="" class="img-thumbnail">
                        <div class="caption">
                            <!--放场景的类型-->
                            <span class="badge">
                                <h7 th:if="${scene.sState == 1}">已放置</h7>
                                <h7 th:if="${scene.sState == 0}">未放置</h7>
                            </span>
                            <h3 th:text="${scene.sName}"></h3>
                            <p th:text="${scene.sDescription}"></p>
                            <p>
                                <a href="javascript:void(0)" th:onclick="'display('+${scene.sId}+')'" class="btn btn-primary" role="button" data-toggle="modal">预览</a>
                                <a href="javascript:void(0)" th:onclick="'setPlace('+${scene.sId}+')'" class="btn btn-info" role="button" data-toggle="modal">设置位置</a>
                                <a href="javascript:void(0)" th:onclick="'editScene('+${scene.sId}+')'" class="btn btn-success" role="button" data-toggle="modal">编辑</a>
                                <a href="javascript:void(0)"  th:onclick="'deleteScene('+${scene.sId}+')'" class="btn btn-danger" role="button" data-toggle="modal">删除</a>
                                <!--?????????????????????????-->

                            </p>
                        </div>
                    </div>
                </div>
                <!--<div th:if="${sceneStat.index %6 == 5}">-->
                <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</div>


</body>
<script>
    //场景展示
    function display(id){
        layer.open({
            type: 2,
            title: '场景预览',
            closeBtn: 1,
            area: ['50%', '70%'],
            shadeClose: true, //点击遮罩关闭
            //去掉父层的滚动条
            scrollbar: false,
            //templates里面的是模版文件，不能直接通过文件+后缀名的方式访问，只能通过走服务器访问（no去掉自己的滚动条）   +data[index].sId+''走controller根据id展示内容
            content: ['http://localhost:8085/manaDisplay?sId='+id,'no']
        });
    }

    //设置位置
    function setPlace(id){
        layer.open({
            type: 2,
            title: '设置位置',
            closeBtn: 1,
            area: ['60%', '80%'],
            shadeClose: true, //点击遮罩关闭
            //去掉父层的滚动条
            scrollbar: false,
            //templates里面的是模版文件，不能直接通过文件+后缀名的方式访问，只能通过走服务器访问（no去掉自己的滚动条）   +data[index].sId+''走controller根据id展示内容
            content: ['http://localhost:8085/setPlace?sId='+id,'no']
        });
    }

    //删除场景
    function deleteScene(id) {
        if (confirm("是否确认删除?")) {
            $.ajax({
                url: "/deleteScene",
                data: {"sId": id},
                dataType: "json",   //返回的数据是json 格式
                type: "GET",
                success: function (data) {
                    alert("删除成功");
                    window.location.reload();
                }
            })
        }
    }

    //编辑场景
    function editScene(id){
        window.location.href="/editScene?sId="+id;
    }


//     var sName=$("#selectName").text();
//
// //    查询
//     function select(){
//
//     }

</script>
</html>